<template>
  <PageWrapper>
    <div class="bg">
      <a-space direction="vertical" style="width: 100%" :size="20">
        <a-alert
          message="使用 useModal 进行弹窗操作，默认可以拖动，可以通过 draggable
    参数进行控制是否可以拖动/全屏，并演示了在Modal内动态加载内容并自动调整高度"
          show-icon
        />
        <a-button type="primary" class="my-4" @click="openModalLoading">
          打开弹窗,加载动态数据并自动调整高度(默认可以拖动/全屏)
        </a-button>

        <a-alert message="内外同时同时显示隐藏" show-icon />
        <a-button type="primary" class="my-4" @click="openModal2"> 打开弹窗 </a-button>

        <a-alert message="自适应高度" show-icon />
        <a-button type="primary" class="my-4" @click="openModal3"> 打开弹窗 </a-button>

        <a-alert message="使用动态组件的方式在页面内使用多个弹窗" show-icon />
        <a-space>
          <a-button type="primary" class="my-4" @click="openTargetModal(1)"> 打开弹窗1 </a-button>
          <a-button type="primary" class="my-4" @click="openTargetModal(2)"> 打开弹窗2 </a-button>
          <a-button type="primary" class="my-4" @click="openTargetModal(3)"> 打开弹窗3 </a-button>
        </a-space>

        <component :is="currentModal" v-model:visible="modalVisible" :userData="userData" />

        <Modal1 @register="register1" />
        <Modal2 @register="register2" />
        <Modal3 @register="register3" />
      </a-space>
    </div>
  </PageWrapper>
</template>

<script lang="ts" setup name="assemblyModal">
import { reactive, ref, shallowRef, ComponentOptions, nextTick } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { useModal } from '@/components/Modal'
import Modal1 from './Modal1.vue'
import Modal2 from './Modal2.vue'
import Modal3 from './Modal3.vue'

const [register1, { openModal: openModal1 }] = useModal()
const [register2, { openModal: openModal2 }] = useModal()
const [register3, { openModal: openModal3 }] = useModal()

const currentModal = shallowRef<Nullable<ComponentOptions>>(null)
const modalVisible = ref<Boolean>(false)
const userData = ref<any>(null)

function openModalLoading() {
  openModal1(true)
}

function openTargetModal(index: number) {
  switch (index) {
    case 1:
      currentModal.value = Modal1
      break
    case 2:
      currentModal.value = Modal2
      break
    case 3:
      currentModal.value = Modal3
      break
  }
  nextTick(() => {
    // `useModal` not working with dynamic component
    // passing data through `userData` prop
    userData.value = { data: Math.random(), info: 'Info222' }
    // open the target modal
    modalVisible.value = true
  })
}
</script>

<style lang="less" scoped>
.bg {
  width: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
